<template>
  <div class="ShopUser">
    <div class="title">用户中心设置</div>
    <div class="ShopUser-content">
      <div class="usercenter-mobile">
        <div class="user-center-child-item">
          <div class="header-bg" style="background-image: url(http://stc.weimob.cn/saas/retail/image/user/member/member-default_bg1.jpg);" />
          <div class="header-membership-center">
            <img src="https://cdn2.weimob.com/saas/@assets/saas-fe-console-retail/@1.250.0/static/images/userheadpic.3161e792.png" class="member-photo" alt="">
            <span class="member-nick-name">用户昵称</span>
            <a-icon type="appstore" />
          </div>
          <div class="header-membership-fot">
            <span class="card-title" style="color: rgb(255, 255, 255);">获取会员专享权益</span>
            <span class="card-growth" style="color: rgb(255, 255, 255);">
              <span class="card-btn" style="color: rgb(255, 255, 255);">立即领卡</span>
            </span>
          </div>
        </div>
        <div class="user-center-child-item user-center-asset">
          <div class="asset-item">
            <div class="asset-content-v">0</div>
            <div class="asset-content-t">余额</div>
          </div>
          <div class="asset-item">
            <div class="asset-content-v">0</div>
            <div class="asset-content-t">积分</div>
          </div>
          <div class="asset-item">
            <div class="asset-content-v">0</div>
            <div class="asset-content-t">优惠券</div>
          </div>
        </div>
        <div class="user-center-child-item user-center-order">
          <div class="order-head">
            <span class="order-head-name">订单信息</span>
            <span class="order-head-btn">查看全部订单 <a-icon type="right" /></span>
          </div>
          <div class="order-content">
            <div class="order-item">
              <a-icon class="sprite-payment" type="credit-card" />
              <div class="order-content-t">待付款</div>
            </div>
            <div class="order-item">
              <a-icon class="sprite-payment" type="credit-card" />
              <div class="order-content-t">待发货</div>
            </div>
            <div class="order-item">
              <a-icon class="sprite-payment" type="credit-card" />
              <div class="order-content-t">待收货</div>
            </div>
            <div class="order-item">
              <a-icon class="sprite-payment" type="credit-card" />
              <div class="order-content-t">待评价</div>
            </div>
            <div class="order-item">
              <a-icon class="sprite-payment" type="credit-card" />
              <div class="order-content-t">退款/售后</div>
            </div>
          </div>
        </div>
        <div class="user-center-child-item">
          <!--  -->
        </div>
        <div class="user-center-child-item">
          <!--  -->
        </div>
        <div class="user-center-child-item">
          <!--  -->
        </div>
        <div class="user-center-child-item">
          <!--  -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
    }
  },
  mounted() {
  },
  methods: {
  }
}
</script>

<style lang="less" scoped>
.ShopUser{
  padding: 20px 5px;
  .title{
    color: #595961;
    font-size: 16px;
    padding: 0 0 20px 0 ;
  }
  .ShopUser-content{
    background: #F2F2F6;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    .user-center-child-item{
      cursor: pointer;
      position: relative;
    }
    .usercenter-mobile{
      width: 380px;
      height: 669px;
      background-color: #F2F2F6;
      margin: 30px 0 60px 60px;
      overflow-x: hidden;
      overflow-y: auto;
      .header-bg{
        position: absolute;
        // z-index: 2;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-origin: border-box;
        background-clip: border-box;
      }
      .header-membership-center{
        display: flex;
        align-items: center;
        height: 116px;
        position: relative;
        width: 100%;
        margin: 0;
        padding: 0
      }
      .member-photo{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-left: 36px;
        flex-shrink: 0;
      }
      .member-nick-name{
        font-size: 16px;
        padding: 0 7px;
        line-height: 1.2;
      }
      .header-membership-fot{
        display: flex;
        align-items: center;
        height: 39px;
        position: relative;
        width: 100%;
        margin: 0;
        padding: 0;
        transition: all linear 150ms;
      }
      .card-title{
        margin-left: 50px;
        width: 50%;
        display: inline-block;
      }
      .card-growth{
        width: 50%;
        display: inline-block;
        text-align: right;
        margin-right: 25px;
      }
    }
    .user-center-asset{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #fff;
      .asset-item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: calc(100% / 3);
        height: 64px;
        overflow: hidden;
        position: relative;
        text-align: center;
        border-right: 1px solid #eee;
      }
    }
    .user-center-order{
      margin-top: 10px;
      position: relative;
      background: #fff;
      .order-head{
        height: 43px;
        line-height: 43px;
        padding: 0 16px;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        .order-head-btn{
          font-family: PingFangSC-Light;
          font-size: 13px;
          color: #999999;
        }
      }
      .order-content{
        display: flex;
      }
      .order-item{
        flex: 1;
        display: flex;
        height: 78px;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .sprite-payment{
          font-size: 16px;
          margin-bottom: 5px;
        }
        .order-content-t{
          font-size: 13px;
        }
      }
    }
  }
}
</style>
